<template>
  <div class="wp-tab-box">
    <div class="wp-tab-box__btn">
      <el-button
type="warning" icon="el-icon-plus" @click.native="handleContacts"
        >添加联系人</el-button
      >
    </div>
    <div>
      <el-table
        max-height="300"
        highlight-current-row
        :data="list"
        stripe
        :key="tableKey"
        :tooltip-effect="'dark'"
        empty-text="暂无联系人"
      >
        <el-table-column prop="contactsName" label="姓名" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="handleContacts(scope.$index, scope.row)"
              >{{ scope.row.contactsName }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号码"
          class-name="wp-opt"
        ></el-table-column>
        <el-table-column prop="position" label="职务"> </el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160">
          <template slot-scope="scope">
            <span class="wp-opt_setting">
              <span v-if="scope.row.primaryContacts === 1">
                <i class="wp wp-success"></i>
                首要联系人
              </span>
              <el-link
                v-else
                @click="handlePrimaryContact(scope.$index,scope.row)"
                type="primary"
                size="medium"
                >设为首要联系人</el-link
              >
            </span>
            <span class="wp-opt_delete">
              <el-link type="danger" @click.native="handleDeleteContacts(scope.$index,scope.row)">删 除</el-link>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Drawer  ref="contactsDrawer" width="60%">
      <Contacts-detail
        :data="detial"
        :index="index"
        @cancel="cancel"
        @save="handleSaveContacts"
      ></Contacts-detail>
    </Drawer>
  </div>
</template>

<script>
import Drawer from '@/components/Drawer'
import Contacts from '../mixins/Contacts'
import ContactsDetail from './ContactsDetail'
export default {
  props: {
    param: {type: Object,
      default: () => {
        return {}
      }}
  },
  components: { Drawer, ContactsDetail },
  mixins: [Contacts],
  data () {
    return {
      type: 'contacts',
      detial: {},
      index: -1,
      tableKey: 1,
      showDrawer: false
    }
  },
  created () {
    this.getContactsList(this.param.customerCode)
  },
  methods: {

    handleContacts (index, row) {
      if (row) {
        // 更新联系人
        this.detial = { ...row }
        this.index = index
      } else {
        // 新增联系人
        this.detial = {}
        if (this.param.hasOwnProperty('customerCode')) {
          this.detial.customerCode = this.param.customerCode
        }
        this.index = -1
      }
      this.$refs.contactsDrawer.show()
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-tab-box{
  &__btn{
  text-align: right;
  margin: 5px;
  }
}
.wp-opt {
  &_delete {
    padding-left: 5px;
  }
}
.wp {
  font-style: normal;
  color: #389e0b;
}
.wp-success:before {
  content: "\2714";
}
</style>
